<h3>监听按钮是否被focus</h3>
<h5>自动增加class="cdk-focused"</h5>
<div class="example-focus-monitor">
  <button cdkMonitorSubtreeFocus
          (cdkFocusChange)="elementOrigin = formatOrigin($event); markForCheck()">
    Focus Monitored Element ({{elementOrigin}})
  </button>
</div>

<h3>群监听div下的按钮组</h3>
<div class="example-focus-monitor">
  <div cdkMonitorSubtreeFocus
       (cdkFocusChange)="subtreeOrigin = formatOrigin($event); markForCheck()">
    <p>Focus Monitored Subtree ({{subtreeOrigin}})</p>
    <button>Child Button 1</button>
    <button>Child Button 2</button>
  </div>
</div>

<h3>加入特殊效果</h3>
<div class="example-focus-monitor">
  <button #monitored>1. Focus Monitored Element ({{origin}})</button>
  <button #unmonitored>2. Not Monitored</button>
</div>

<select #simulatedOrigin value="mouse">
  <option value="mouse">Mouse</option>
  <option value="keyboard">Keyboard</option>
  <option value="touch">Touch</option>
  <option value="program">Programmatic</option>
</select>

<button (click)="focusMonitor.focusVia(monitored, simulatedOrigin.value)">
  Focus button #1
</button>
<button (click)="focusMonitor.focusVia(unmonitored, simulatedOrigin.value)">
  Focus button #2
</button>